<template>
    <van-image class="bg" :src="bg"></van-image>
    <div class="container">
        <!-- 用户头像区域 -->
        <div class="user-info common-margin-bottom">
            <van-image class="avatar" :src="avatar" width="5rem" height="5rem" round></van-image>
            <div class="user-info-desc">
                <b>青风</b>
                <span class="level-desc">银星级 18888888888</span>
            </div>
        </div>
        <!-- 用户的等级区域 -->
        <div class="user-level common-margin-bottom common-padding common-color common-radius">
            <div class="user-level-num">
                <b>7</b>
                <i class="iconfont star-icon-shoucangjia"></i>
            </div>
            <van-progress pivot-text="" color="#00682f" :percentage="50" />
            <van-row class="user-level-descs">
                <van-col span="6">铁星级</van-col>
                <van-col span="8">银星级</van-col>
                <van-col span="10">金星级</van-col>
            </van-row>
        </div>
        <!-- 卡券区域 -->
        <div class="tickets-cards">
            <div class="tickets common-margin-bottom common-padding common-color common-radius">
                <div class="num-box"><span class="num">7</span>&nbsp;张</div>
                <div class="tickets-link">我的好礼券<van-icon name="arrow" /></div>
            </div>
            <div class="cards common-margin-bottom common-padding common-color common-radius">
                <div class="num-box"><span class="num">4</span>&nbsp;张</div>
                <div class="tickets-link">我的星礼卡<van-icon name="arrow" /></div>
            </div>
        </div>
        <!-- 我的星巴克区域 -->
        <div class="my-starbucks common-margin-bottom common-padding common-color common-radius">
            <b>我的星巴克</b>
            <div class="my-starbucks-operations">
                <img src="@/assets/imgs/mine/my-prize.png" />
                <img src="@/assets/imgs/mine/my-coffe.png" />
                <img src="@/assets/imgs/mine/my-gift.png" />
            </div>
        </div>
        <!-- 常用功能区域 -->
        <div class="usual-operation common-margin-bottom common-padding common-color common-radius">
            <b>常用功能</b>
            <service-cell class="service-cell" v-for="(item, index) in serviceList" :key="index"
                :service="item"></service-cell>
        </div>
    </div>
</template>
  
<script setup>
import ServiceCell from "./components/ServiceCell.vue";
import bg from "@/assets/imgs/mine/bg-userInfo.png";
import avatar from "@/assets/imgs/mine/avator.jpg";
import iconAddress from "@/assets/imgs/mine/service/address.png";
import iconFolder from "@/assets/imgs/mine/service/folder.png";
import iconAttention from "@/assets/imgs/mine/service/attention.png";
import iconCustomService from "@/assets/imgs/mine/service/customerService.png";
import iconLegal from "@/assets/imgs/mine/service/legal.png";

const serviceList = [
    {
        icon: iconAddress,
        title: "地址管理",
        path: "/address",
    },
    {
        icon: iconFolder,
        title: "发票管理",
        path: "",
    },
    {
        icon: iconAttention,
        title: "关注公众号",
        path: "",
    },
    {
        icon: iconCustomService,
        title: "在线客服",
        path: "",
    },
    {
        icon: iconLegal,
        title: "条款与证照",
        path: "",
    },
]
</script>
  
<style lang="scss" scoped>
.bg {
    width: 100%;
}

.container {
    padding: 0px 20px 20px;
    transform: translateY(-10rem);

    // 定义盒内的公共样式
    .common-margin-bottom {
        margin-bottom: 20px;
    }

    .common-padding {
        padding: 15px 20px;
        box-sizing: border-box;
    }

    .common-color {
        background: #ffffff;
    }

    .common-radius {
        border-radius: 8px;
    }

    b {
        font-size: 1.5rem;
    }

    // 用户头像区域
    .user-info {
        display: flex;

        .avatar {
            margin-right: 15px;
        }

        .user-info-desc {
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .level-desc {
                font-weight: 600;
            }
        }
    }

    // 用户等级区域
    .user-level {
        .user-level-num {
            i {
                font-size: 1.25rem;
                margin-left: 10px;
            }
        }

        .user-level-descs {
            margin-top: 10px;

            font: {
                siz: 0.8rem;
                weight: 600;
            }
        }
    }

    // 卡券区域
    .tickets-cards {
        display: flex;
        justify-content: center;

        .tickets,
        .cards {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            font-weight: 600;

            .num-box {
                margin-bottom: 10px;

                .num {
                    color: #00682f;

                    font: {
                        size: 2.7rem;
                        weight: 600;
                    }
                }
            }
        }

        .tickets {
            margin-right: 10px;
        }
    }

    // 我的星巴克区域
    .my-starbucks {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .my-starbucks-operations {
            display: flex;
            justify-content: space-around;

            img {
                width: 30%;
            }
        }
    }
}</style>
  